<!-- @format -->

<template>
  <div class="my-goods-item">
    <div class="left">
      <div class="custom-control custom-checkbox">
        <input
          type="checkbox"
          class="custom-control-input"
          :id="goodsObj.id"
          v-model="goodsObj.goods_state" />
        <label
          class="custom-control-label"
          :for="goodsObj.id">
          <img
            :src="goodsObj.goods_img"
            alt="" />
        </label>
      </div>
    </div>
    <div class="right">
      <div class="top">{{ goodsObj.goods_name }}</div>
      <div class="bottom">
        <span class="price">¥ {{ goodsObj.goods_price }}</span>
        <div class="my-counter">
          <button
            type="button"
            class="btn btn-light"
            @click="decrease">
            -
          </button>
          <input
            type="number"
            class="form-control inp"
            v-model.number.lazy="goodsObj.goods_count" />
          <button
            type="button"
            class="btn btn-light"
            @click="increase">
            +
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      goodsObj: {
        type: Object,
        required: true
      }
    },
    watch: {
      // 侦听 goodsObj 的变化
      goodsObj: {
        deep: true, // 开启深度侦听
        handler(newVal) {
          // 处理函数
          // 1. 防止零或负数
          if (newVal.goods_count <= 1) {
            newVal.goods_count = 1
          }
          // 2. 正小数需要取整
          // Number.isInteger(数字): 判断某个数字是否是整数；如果是，返回true；否则返回false
          if (!Number.isInteger(newVal.goods_count)) {
            newVal.goods_count = parseInt(newVal.goods_count)
          }
        }
      }
    },
    methods: {
      // 数量+
      increase() {
        this.goodsObj.goods_count++
      },
      // 数量-
      decrease() {
        if (this.goodsObj.goods_count <= 1) return
        this.goodsObj.goods_count--
      }
    }
  }
</script>

<style lang="less" scoped>
  // 商品列表样式
  .my-goods-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    .left {
      label {
        margin-left: 6px;
      }
      img {
        width: 120px;
        height: 120px;
        margin-right: 8px;
        border-radius: 10px;
      }
      .custom-control-label::before,
      .custom-control-label::after {
        top: 50px;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top {
        font-size: 14px;
        font-weight: 700;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        align-items: center;
        .price {
          color: red;
          font-weight: bold;
        }
        .my-counter {
          display: flex;
          .inp {
            width: 75px;
            outline: none !important;
            text-align: center;
            margin: 0 5px;
          }
          .btn {
            flex: 1;
            transform: scale(0.9);
          }
        }
      }
    }
  }
</style>
